<template>
  <div>
	  <div class="ant-pro-page-header-search">
	    <a-input-search size="large" style="width: 80%; max-width: 522px;" v-model="queryParam.title" @search="getList">
	      <template v-slot:enterButton>
	        搜索
	      </template>
	    </a-input-search>
		<a-button type="danger" size="large" @click="queryParam={}">重置</a-button>
	  </div>
    <a-card :bordered="false">
      <a-list
        size="large"
        rowKey="id"
        :loading="loading"
        itemLayout="vertical"
        :dataSource="data"
      >
        <a-list-item :key="item.id" slot="renderItem" slot-scope="item">
          <template slot="actions">
            <icon-text type="star-o" text="666" />
            <icon-text type="like-o" text="666" />
            <icon-text type="message" text="666" />
          </template>
          <a-list-item-meta>
            <a slot="title" @click="go(item.id)">{{ item.title }}</a>
          </a-list-item-meta>
		  <div class="antd-pro-components-article-list-content-index-listContent">
		    <div class="description">
		      <slot>
		        {{ item.desp }}
		      </slot>
		    </div>
		    <div class="extra">
		      <a-avatar :src="item.avatar | avatarFilter" size="small" />
		      <a>{{ item.creater.name }}</a> 发布在 </a>
		      <em>{{ item.updateTime | timeFilter }}</em>
		    </div>
		  </div>
        </a-list-item>
        <div slot="footer" v-if="data.length > 0" style="text-align: center; margin-top: 16px;">
          <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
        </div>
      </a-list>
    </a-card>
  </div>
</template>

<script>

import IconText from './components/IconText'
import {page} from '@/api/notice'
import moment from 'moment'

export default {
  components: {
    IconText
  },
  data () {
    return {
      loading: true,
      loadingMore: false,
      data: [],
	  // 查询参数
	  queryParam: {
		  title: null,
		  status: 1
	  },
	  pageNo: 1,
	  pageSize: 10
    }
  },
  mounted () {
    this.getList()
  },
  filters: {
    avatarFilter (avatar) {
		if(avatar){
			return "http://localhost:8080/static/" + avatar
		}else{
			return "https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"  //默认头像
		}
    },
	  timeFilter(time){
		return moment(time).fromNow()
	  }
  },
  methods: {
    getList () {
		const requestParameters = Object.assign({}, {pageNo:this.pageNo,pageSize:this.pageSize}, {parameter:this.queryParam})
		page(requestParameters).then(res => {
			console.log('res', res)
			if(res.code == 200){
				  this.data = res.data.result
				  this.loading = false
			}
		})
    },
    loadMore () {
      this.loadingMore = true
	  const requestParameters = Object.assign({}, {pageNo:this.pageNo + 1,pageSize:this.pageSize}, {parameter:this.queryParam})
	  page(requestParameters).then(res => {
	  	console.log('res', res)
	  	if(res.code == 200){
		  this.data = this.data.concat(res.data.result)
		  this.loading = false
	  	}
	  }).finally(() => {
        this.loadingMore = false
      })
    },	
	go(id){
		this.$router.push({
		    name:"NoticeDetail",
		    params:{
		        id:id
		    }
		})
	}
  }
}
</script>

<style lang="less" scoped>
@import './index.less';

.ant-pro-page-header-search {
  text-align: center;
  margin-bottom: 16px;
}

.antd-pro-components-article-list-content-index-listContent {
  .description {
    max-width: 720px;
    line-height: 22px;
  }
  .extra {
    margin-top: 16px;
    color: @text-color-secondary;
    line-height: 22px;

    & :deep(.ant-avatar) {
      position: relative;
      top: 1px;
      width: 20px;
      height: 20px;
      margin-right: 8px;
      vertical-align: top;
    }

    & > em {
      margin-left: 16px;
      color: @disabled-color;
      font-style: normal;
    }
  }
}

@media screen and (max-width: @screen-xs) {
  .antd-pro-components-article-list-content-index-listContent {
    .extra {
      & > em {
        display: block;
        margin-top: 8px;
        margin-left: 0;
      }
    }
  }
}
</style>
